<template>
  <div class="usage_rate">
    <div class="progress">
      <p>{{ rate ? `${(rate * 100).toFixed(1)}%` : 0 }}</p>
      <ga-progress
        type="circle"
        :stroke-width="5"
        :show-text="false"
        :status="status"
        size="small"
        :percent="rate"
      />
    </div>
    <div class="num">
      <div>
        <p>已使用</p>
        <p>总容量</p>
      </div>
      <div class="used_total">
        <p>{{ used }}</p>
        <p>{{ total }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
const props = defineProps({
  total: {
    required: Number,
    default: 0,
  },
  used: {
    required: Number,
    default: 0,
  },
});
const rate = computed(() => props.used / props.total);
const status = computed(() => {
  if (rate.value >= 0.8) return "danger";
  else if (rate.value < 0.8 && rate.value > 0.6) return "warning";
  else return "success";
});
onMounted(() => {});
</script>

<style scoped lang="scss">
.usage_rate {
  display: flex;
  align-items: center;
  //   border: 1px solid #f99;
  min-width: 160px;
  .progress {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-width: 38px;
    p {
      font-size: 12px;
    }
  }
  .num {
    margin-left: 8px;
    display: flex;
    color: #2c406899;
    .used_total {
      color: #011948;
      margin-left: 4px;
      text-align: right;
    }
  }
}
:deep(.garco-progress-circle-wrapper) {
  width: 24px !important;
  height: 24px !important;
}
</style>
